<template>
    <el-dropdown style="width: 100%;" popper-class="select-dropdown" trigger="click" @command="handleCommand">
        <el-input ref="inputRef" :model-value="props.modelValue" @update:model-value="handleUpdateValue" :type="props.type" v-bind="props.inputProps" :disabled="props.modelValue === '/'"/>
        <template #dropdown>
            <el-dropdown-menu :style="`width: ${inputWidth}`">
                <el-dropdown-item :command="option.value" v-for="option of options">{{ option.label }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
const props = defineProps<{
    type: string,
    inputProps: Record<any,any>
    options: any[],
    disabled?: boolean,
    modelValue: any
}>()
const emits = defineEmits(["update:modelValue"])
const inputRef = useTemplateRef("inputRef")

const inputWidth = ref("")

window.addEventListener("resize",(e)=>{
    console.log("computed style",getComputedStyle(inputRef.value?.$el).width)
    inputWidth.value = getComputedStyle(inputRef.value?.$el).width
})

onMounted(()=>{
    console.log("disabled: ",props.disabled)
    console.log("computed style",getComputedStyle(inputRef.value?.$el).width)
    inputWidth.value = getComputedStyle(inputRef.value?.$el).width
})

function handleUpdateValue(v:string){
    console.log("update:modelValue",v)
    emits("update:modelValue",v)
}

function handleCommand(command:string){
    console.log("command triggered", command)
    emits("update:modelValue",command)
}
</script>

<style scoped>
.select-dropdown{
    width: 500px;
}

</style>